<template>
  <div class="hsx-permissions-details">
   <!-- 角色权限详情 -->
   <div class="row condition clearfix lh40">
        <div class="row-item clearfix fl mr15">
          <span class="row-item-title fl">
            角色ID：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="getPermissionsDetailsDate.roleId"></el-input>
          </span>
        </div>
        <div class="row-item clearfix fl mr15">
          <span class="row-item-title fl">
            角色名称：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="getPermissionsDetailsDate.roleId"></el-input>
          </span>
        </div>
        <div class="row-item clearfix fl mr15">
          <span class="row-item-title fl">
            角色编码：
          </span>
          <span class="fl span-input">
            <el-input placeholder="请输入内容" v-model="getPermissionsDetailsDate.roleId"></el-input>
          </span>
        </div>
        <div class="row-item clearfix fl">
          <el-button type="primary" @click="FnSave">保存</el-button>
        </div>
    </div>
    <div class="h-permissions-details-tabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="角色权限" name="first">
          <div class="permissions-select">
            <table cellspacing="0" cellpadding="0">
            <thead>
              <th>序号</th>
              <th>菜单名称</th>
              <th>全选</th>
              <th>权限名称</th>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>系统菜单</td>
                <td>
                  <el-checkbox v-model="checkSystemMenuAll" @change="FnAllElectionSystemMenu"></el-checkbox>
                </td>
                <td>
                  <el-checkbox-group v-model="checkSystemMenued" @change="FnElectionSystemMenu">
                    <el-checkbox v-for="i in menuOptions" :label="i" :key="i">{{i}}</el-checkbox>
                  </el-checkbox-group>
                </td>
              </tr>

              <tr>
                <td>2</td>
                <td>工单系统</td>
                <td>
                  <el-checkbox v-model="checkWorkOrderSystemAll" @change="FnAllElectionWorkOrderSystem"></el-checkbox>
                </td>
                <td>
                  <el-checkbox-group v-model="checkWorkOrderSystemed" @change="FnElectionWorkOrderSystem">
                    <el-checkbox v-for="i in workOrderSystemOptions" :label="i" :key="i">{{i}}</el-checkbox>
                  </el-checkbox-group>
                </td>
              </tr>
            </tbody>
          </table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="包含用户" name="second">
          <ShowTable :tableData='tableData' :selections='selections' :lableList='lableList' :talLength='talLength' :pageSize='pageSize' :pageNum='pageNum' @getSortableFn='getSortableFn'></ShowTable>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import ShowTable from '../components/table/show-table'
export default {
  name: '',
  data(){
    return {
      checkWorkOrderSystemAll:'',
      workOrderSystemOptions:[],
      checkWorkOrderSystemed:[],
      checkSystemMenuAll: '',
      checkSystemMenued: [],
      menuOptions: [],
      activeName:'first',
      tableData:[
        {
          n1:'账号1',
          n2:'角色2',
          n3:'部门3',
          n4:'姓名3',
          n5:'邮箱3',
          n6:'手机号码',
          n7:'电话号码33',
          n8:'是',
          n9:'否',
        }
      ],
      selections:false,
      lableList:{
        n1:'账号',
        n2:'角色',
        n3:'部门',
        n4:'姓名',
        n5:'邮箱',
        n6:'手机号码',
        n7:'电话号码',
        n8:'允许登录',
        n9:'是否禁用',
      },
      talLength:30,
      pageSize:15,
      pageNum:1
    }
  },
  props:{
    getPermissionsDetailsDate:{
      type:Object,
      default:function() {
        return {}
      }
    }
  },
  created(){
    for (var i in this.getPermissionsDetailsDate) {
      this[i] = this.getPermissionsDetailsDate[i]
    }
  },
  mounted(){

  },
  methods:{
    FnSave () {
      this.$emit('FnDetails',{checkWorkOrderSystemed:this.checkWorkOrderSystemed,checkSystemMenued:this.checkSystemMenued})
    },
      FnAllElectionWorkOrderSystem (e) {//工单系统
        this.checkWorkOrderSystemed = e ? this.workOrderSystemOptions : [];
      },
      FnElectionWorkOrderSystem (e) {//工单系统
        let checkedCount = e.length;
        this.checkWorkOrderSystemAll = checkedCount === this.workOrderSystemOptions.length;
      },
      FnAllElectionSystemMenu(e) {//系统菜单
          this.checkSystemMenued = e ? this.menuOptions : [];
      },
      FnElectionSystemMenu(e) {//系统菜单
        let checkedCount = e.length;
        this.checkSystemMenuAll = checkedCount === this.menuOptions.length;
    },
    handleClick (e) {

    },
    getSortableFn(e) {
      console.log(e,'表格发生的事件')
    }
  },
  components:{
    ShowTable
  },
  computed:{

  },
  watch:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.hsx-permissions-details {
  overflow: hidden;
  padding-left: 15px;
  .condition {
    height: 60px;
    padding-top: 15px;
  }
  .h-permissions-details-tabs {
          margin-left: 1px;
    .permissions-select {
      table {
        width: 100%;
         border-collapse:collapse;
         text-align: center;
         line-height: 30px;
         padding: 0;
        td,th {
          border:1px solid #DCDFE6;
        }
        tr {
          td:nth-child(1) {
            width: 40px;
          }
          td:nth-child(2) {
            width: 80px;
          }
          td:nth-child(3) {
            width: 40px;
          }
        }
      }
    }
  }
}

</style>
